<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="centerDialogVisible"
               center
               class="abow_dialog">
      <div style="text-align:right;color:darkorange;margin: auto; width: max-content; max-height: 100%">
        实验机房：<template>
          <el-select v-model="in_labId"
                     class="input3"
                     clearable
                     style="width: 200px;"
                     placeholder="实验机房：">
            <el-option v-for="item in labOptions"
                       :key="item.labId"
                       :label="item.labName+'   机房'+item.labId"
                       :value="item.labId">
            </el-option>
          </el-select>
        </template><br><br>
        故障描述：<el-input v-model="in_des"
                  class="input3"
                  placeholder="故障描述："
                  style="width: 200px"></el-input>
        <div style="text-align:center;">
          <el-button class="botton"
                     @click="centerDialogVisible = false">取 消
          </el-button>
          <el-button class="botton"
                     @click="insertConfirm()">确 定
          </el-button>
        </div>
      </div>
    </el-dialog>
    <div style="color: darkorange; font-size: small; height: 30px">
      <el-input v-model="to_labId"
                class="input"
                placeholder="机房"
                style="width: 100px"></el-input>&nbsp;
      <el-input v-model="to_des"
                class="input"
                placeholder="故障描述"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <span class="block"
              style="margin-right: 8px;">
          <el-date-picker v-model="to_date"
                          class="input3"
                          type="date"
                          style="width: 130px"
                          placeholder="选择日期">
          </el-date-picker>
        </span>
      </template>
      <el-button class="botton"
                 @click="load()">搜索
      </el-button>
      <el-button class="botton"
                 @click="insert()">申请 <i class="el-icon-circle-plus"></i></el-button>
    </div>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :row-style="{ color: 'darkorange', height: '60px' }"
                border
                fit
                style="width: 100%">
        <el-table-column sortable
                         label="维修机房"
                         prop="labId"></el-table-column>
        <el-table-column label="机房名称"
                         prop="lab.labName"></el-table-column>
        <el-table-column sortable
                         :formatter="formatDate"
                         label="申请日期"
                         prop="date"></el-table-column>
        <el-table-column label="故障描述"
                         prop="des"></el-table-column>
        <el-table-column label="申请状态"
                         prop="stateString"></el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0; text-align: center">
      <el-pagination :current-page="page"
                     :total="total"
                     background
                     class="white-list-tool"
                     layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(["user", "term", "token"]),
  data () {
    return {
      labOptions: '',
      title: "",
      tableData: [],
      total: 0,
      page: 1,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      insertOrUpdate: true,

      in_userId: '',
      in_labId: '',
      in_des: '',
      in_date: '',
      in_state: '',

      to_labId: '',
      to_des: '',
      to_date: '',
      to_state: '',

      multipleSelection: [],
    };
  },
  methods: {
    insert () {
      this.centerDialogVisible = true
      this.insertOrUpdate = true
      this.title = "报修填写"
      this.clearInput()
    },
    clearInput () {
      this.in_userId = ""
      this.in_labId = ""
      this.in_des = ""
      this.in_date = ""
      this.in_state = ""
    },
    async insertConfirm () {
      await this.$http.post("/labRep", {
        userId: this.user.userId,
        labId: this.in_labId,
        des: this.in_des,
      }, { headers: { 'userId': this.token } }).then((res) => {
        if (res.data.success) { this.$message("报修成功") }
        else { this.$message(res.data.errorMsg) }
      });
      this.centerDialogVisible = false;
      this.load();
    },
    load () {
      this.$http
        .post("/labRep/forTea", {
          userId: this.user.userId,
          labId: this.to_labId,
          des: this.to_des,
          date: this.to_date,
          page: this.page
        }, { headers: { 'userId': this.token } })
        .then((res) => {
          this.tableData = res.data.data
          this.total = res.data.total
        });
    },
    handleCurrentChange (page) {
      this.page = page;
      this.load();
    },
    formatDate (row, column) {
      let data = row[column.property]
      if (data == null) {
        return nulls
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },

  },
  created () {
    this.$http.post("/lab/1", {
      page: 1
    }).then((res) => {
      this.labOptions = res.data.data
    })
    this.load();
  },
};
</script>


<style scoped>
::v-deep .el-dialog {
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>